<template>
    <div class="rn-card box-card-style-default" :class="{ 'card-list-view': blogPostStyle === 'list' }">
        <div class="inner">
            <el-tabs v-model="activeName">
                <el-tab-pane label="A P I" name="first">
                    <div class="content" style="flex-basis: 100%">

                        <h4 class="title">
                            {{ blog.title }}

                        </h4>
                        <ul v-if="blogPostStyle === 'list'" class="rn-meta-list">
                            <li>

                                {{ blog.author }}

                            </li>

                            <li>{{ blog.publishedAt }}</li>
                        </ul>

                        <p class="descriptiion" style="color: #000;flex-basis: 100%">
                            {{ blog.excerpt }}
                            <span style="color: #acacac;">
                                {{ blog.excerpt2 }}
                            </span>
                        </p>
                        <br>
                        <p class="descriptiion" style="color: #000;flex-basis: 100%">
                            {{ blog.type }}
                            <span style="color: #acacac;">
                                {{ blog.type2 }}
                            </span>
                        </p>

                        <p class="descriptiion" style="color: #000;flex-basis: 100%">
                            {{ blog.method }}
                            <span style="color: #acacac;">
                                {{ blog.method2 }}
                            </span>
                        </p>

                        <p class="descriptiion col-12" style="color: #000;flex-basis: 100%">
                            {{ blog.demonstrate }}
                            <span class="cont">
                                {{ blog.demonstrate2 }}
                            </span>
                        </p>
                        <p class="descriptiion" style="color: #000;flex-basis: 100%">
                            <Icon name="more-vertical" /> {{ blog.canshu }}
                        </p>


                        <div class="col-12">
                            <el-table :data="tableData" style="width: 100%" class="col-12">
                                <el-table-column prop="date" label="参数名称" width="100">
                                </el-table-column>
                                <el-table-column prop="name" label="类型" width="100">
                                </el-table-column>
                                <el-table-column prop="address" label="必填" width="100">
                                </el-table-column>
                                <el-table-column prop="shuom" label="说明">
                                </el-table-column>
                            </el-table>
                        </div>


                        <p class="descriptiion" style="color: #000;flex-basis: 100%">
                            <Icon name="more-vertical" /> {{ blog.canshu2 }}
                        </p>


                        <div class="col-12">
                            <el-table :data="tableData2" style="width: 100%" class="col-12">
                                <el-table-column prop="date" label="参数名称" width="100">
                                </el-table-column>
                                <el-table-column prop="name" label="类型" width="100">
                                </el-table-column>
                                <el-table-column prop="address" label="必填" width="100">
                                </el-table-column>
                                <el-table-column prop="shuom" label="说明">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>

                </el-tab-pane>
                <el-tab-pane label="错误码参照" name="second">
                    <div class="content" style="flex-basis: 100%">
                        <h4 class="title">
                            错误码参照

                        </h4>
                        <div class="col-12">
                            <el-table :data="tableData3" style="width: 100%" class="col-12">
                                <el-table-column prop="date" label="错误码" width="100">
                                </el-table-column>
                                <el-table-column prop="name" label="解释">
                                </el-table-column>

                            </el-table>
                        </div>
                    </div>

                </el-tab-pane>

            </el-tabs>


            <!-- <div class="content" style="flex-basis: 100%">

                <h4 class="title">
                    {{ blog.title }}

                </h4>
                <ul v-if="blogPostStyle === 'list'" class="rn-meta-list">
                    <li>

                        {{ blog.author }}

                    </li>

                    <li>{{ blog.publishedAt }}</li>
                </ul>

                <p class="descriptiion" style="color: #000;flex-basis: 100%">
                    {{ blog.excerpt }}
                    <span style="color: #acacac;">
                        {{ blog.excerpt2 }}
                    </span>
                </p>
                <br>
                <p class="descriptiion" style="color: #000;flex-basis: 100%">
                    {{ blog.type }}
                    <span style="color: #acacac;">
                        {{ blog.type2 }}
                    </span>
                </p>

                <p class="descriptiion" style="color: #000;flex-basis: 100%">
                    {{ blog.method }}
                    <span style="color: #acacac;">
                        {{ blog.method2 }}
                    </span>
                </p>

                <p class="descriptiion col-12" style="color: #000;flex-basis: 100%">
                    {{ blog.demonstrate }}
                    <span class="cont">
                        {{ blog.demonstrate2 }}
                    </span>
                </p>
                <p class="descriptiion" style="color: #000;flex-basis: 100%">
                    <Icon name="more-vertical"/> {{ blog.canshu }}
                </p>


                <div class="col-12">
                    <el-table :data="tableData"  style="width: 100%" class="col-12">
                        <el-table-column prop="date" label="参数名称" width="100">
                        </el-table-column>
                        <el-table-column prop="name" label="类型" width="100">
                        </el-table-column>
                        <el-table-column prop="address" label="必填" width="100">
                        </el-table-column>
                        <el-table-column prop="shuom" label="说明">
                        </el-table-column>
                    </el-table>
                </div>


                <p class="descriptiion" style="color: #000;flex-basis: 100%">
                    <Icon name="more-vertical"/> {{ blog.canshu2 }}
                </p>


                <div class="col-12">
                    <el-table :data="tableData2"  style="width: 100%" class="col-12">
                        <el-table-column prop="date" label="参数名称" width="100">
                        </el-table-column>
                        <el-table-column prop="name" label="类型" width="100">
                        </el-table-column>
                        <el-table-column prop="address" label="必填" width="100">
                        </el-table-column>
                        <el-table-column prop="shuom" label="说明">
                        </el-table-column>
                    </el-table>
                </div>

                <h4 class="title">
                    错误码参照

                </h4>
                <div class="col-12">
                    <el-table :data="tableData3"  style="width: 100%" class="col-12">
                        <el-table-column prop="date" label="错误码" width="100">
                        </el-table-column>
                        <el-table-column prop="name" label="解释">
                        </el-table-column>

                    </el-table>
                </div>
            </div> -->

        </div>
    </div>
</template>

<script>
import Icon from '../../components/icon/Icon'

export default {

    name: 'BlogPost',
    components: {
        Icon,
    },
    data() {
        return {
            activeName: 'first',
            radio2: '1',
            tableData: [
                {
                    date: 'accoutid',
                    name: 'int',
                    address: '是',
                    shuom: '要修改的账号'
                }, {
                    date: 'company',
                    name: 'string',
                    address: '是',
                    shuom: '企业格式'

                }, {
                    date: 'signature',
                    name: 'string',
                    address: '是',
                    shuom: '签名格式'

                }, {
                    date: 'sigatrue',
                    name: 'string',
                    address: '是',
                    shuom: '状态报告回送地址设置后可以接收到短信的发送状态报告'

                }],
            tableData2: [
                {
                    date: 'accoutid',
                    name: 'int',
                    address: '是',
                    shuom: '要修改的子账号ID'
                }, {
                    date: 'company',
                    name: 'string',
                    address: '是',
                    shuom: '企业格式'

                }, {
                    date: 'signature',
                    name: 'string',
                    address: '是',
                    shuom: '签名格式'

                }],
            tableData3: [
                {
                    date: '202',
                    name: '接受和处理、但处理未完成',

                }, {
                    date: '203',
                    name: '返回信息不确定或不完整',
                }, {
                    date: '304',
                    name: '客户端已经执行了GET,但文件未变化',
                }, {
                    date: '307',
                    name: '申明请求的资源临时性删除',
                }
                , {
                    date: '400',
                    name: '错误请求，如语法错误',
                }, {
                    date: '401',
                    name: '请求授权失败',
                }, {
                    date: '404',
                    name: '没有发现文件、查询或URl',
                }, {
                    date: '500',
                    name: '服务器产生内部错误',
                }, {
                    date: '504',
                    name: '关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长',
                }
            ]
        };
    },
    props: {
        blog: {},
        blogPostStyle: {
            type: String,
            default: 'card'
        }
    }
}
</script>
<style scoped>
.el-radio--medium.is-bordered {
    margin-left: 10px;
    margin-top: 10px;
}

.el-button--primary {
    background-color: #4985ED;
    border-color: #4985ED;
}

.cont {
    color: #acacac;

}

::v-deep .el-table__header-wrapper {
    height: 50px;
}

::v-deep .el-tabs__nav-scroll {
    margin-left: 30px;
    margin-top: 20px;
}

::v-deep .el-tabs__nav-wrap::after {
    position: absolute;
    left: 30px;
    width: 85%;
}
</style>